<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>郑州租房网后台管理</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet"
	href="/AdminLTE-2.3.11/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/AdminLTE-2.3.11/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
	href="/AdminLTE-2.3.11/dist/css/skins/skin-green.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/layui/css/modules/layer/default/layer.css">
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/laypage/skin/laypage.css">
<script src="/AdminLTE-2.3.11/plugins/jQuery/jquery-2.2.3.min.js"></script>

<script src="/js/vue/vue.min.js" charset="utf-8"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/laypage/laypage.js" charset="utf-8"></script>
<script src="/js/layer/layer.js" charset="utf-8"></script>
<script type="text/javascript">
	layui.use([ 'layer', 'form' ], function() {
		var layer = layui.layer, form = layui.form();
	});
</script>
<script type="text/javascript">
	function utabclick(){
		$("#housetab").attr("hidden","hidden");
		$("#userstab").removeAttr("hidden");
	
	};
	function htabclick(){
		$("#housetab").removeAttr("hidden");
		$("#userstab").attr("hidden","hidden");
	
	};

</script>

</head>
<body class="hold-transition skin-green sidebar-mini">
	<div class="wrapper">

		<header class="main-header">

			<a href="#" class="logo"> <span class="logo-mini">租房</span> <span
				class="logo-lg"><b>郑州租房网</b><#if "${loginuser.isadmin}"=="是">后台管理</#if></span>
			</a>

			<!-- 头部栏 -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- 缩小侧边栏-->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
					role="button"> <span class="sr-only">Toggle navigation</span>
				</a>
				<!-- 显示时间插件-->
				</script>
				<span id="webjx" style="font-style: inherit;font-family: fantasy;font-size: 30px"></span>
				<script>
					setInterval("webjx.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
   				</script>
 				
				<!-- 右侧栏-->
				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Tasks Menu -->
						<li class="dropdown tasks-menu">
							<!-- 用户账户菜单 -->
						<li class="dropdown user user-menu">
							<!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle"
							data-toggle="dropdown"> <!-- The user image in the navbar-->
								<img src="/AdminLTE-2.3.11/dist/img/user2-160x160.jpg"
								class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. -->
								<span class="hidden-xs">欢迎你,<#if "${loginuser.isadmin}"=="是">管理员:</#if>
						<#if "${loginuser.isadmin}"=="不是">用户:</#if>${loginuser.name}</span>
						</a>
							<ul class="dropdown-menu">
								<!-- The user image in the menu -->
								<li class="user-header"><img
									src="/AdminLTE-2.3.11/dist/img/user2-160x160.jpg"
									class="img-circle" alt="User Image">

									<p>
										Admin - Web 开发者 <small>2017.03.25</small>
									</p></li>
								<!-- 用户菜单底部-->
								<li class="user-footer">
									<div class="pull-right">
										<a href="/login.ftl" class="btn btn-default btn-flat">退出</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!--左侧列:包含logo和侧边栏-->
		<aside class="main-sidebar">
			<!-- 侧边栏可以在sidebar.less找到 -->
			<section class="sidebar">
				<!-- 侧边栏用户-->
				<div class="user-panel">
					<div class="pull-left image">
						<img src="/AdminLTE-2.3.11/dist/img/user2-160x160.jpg"
							class="img-circle" alt="User Image">
					</div>
					<div class="pull-left info">
						<p> <#if "${loginuser.isadmin}"=="是">管理员:</#if>
						<#if "${loginuser.isadmin}"=="不是">用户:</#if>${loginuser.name}</p>
						<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
					</div>
				</div>
				<!-- 搜索表单 -->
				<form action="#" method="get" class="sidebar-form">
					<div class="input-group">
						<input type="text" name="q" class="form-control"
							placeholder="Search..."> <span class="input-group-btn">
							<button type="submit" name="search" id="search-btn"
								class="btn btn-flat">
								<i class="fa fa-search"></i>
							</button>
						</span>
					</div>
				</form>
				
				<#if "${loginuser.isadmin}"=="是">
				<!-- 侧边栏菜单(管理员登录才显示) -->
				<ul class="sidebar-menu">
					<li class="header">管理菜单</li>

					<li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span onclick="htabclick()">租房信息管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="#">编辑租房信息</a></li>
							<li><a href="#" id="addHouse">增加租房信息</a></li>
						</ul></li>
					<li class="treeview"><a href="/userlist.ftl"><i class="fa fa-link"></i>
							<span  onclick="utabclick()">用户信息管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="#">编辑用户信息</a></li>
						</ul></li>
				</ul>
				</#if>
				
			</section>
		</aside>
		<!-- 内容包装:包含页面主要内容-->
		<div class="content-wrapper" style="background-color: #ACD04A" id="housetab">
			<!-- 内容头部 -->
			<section class="content-header">
				<h1 style="font-style: inherit;font-family: fantasy;font-size: 30px">
					房源基本信息 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="getHouse" class="btn btn-success">查询</button>
				</h1>
			</section>
			<!-- 主要内容-->
			<section class="content">

				<!--放置你的页面-->
				<div id="app" class="container">
					<div align="center">
						<div class="form-group">
							
							<label class="sr-only" for="title">标题</label> <input type="text"
								class="form-control" id="title" placeholder="标题">

						</div>
						<form class="layui-form" action="">
							<div class="layui-form-item" style="margin: 0">
								<label class="layui-form-label">租金:</label>
								<div class="layui-input-inline">
									<select name="price" id="c_price">
										<option value="">请选择租金</option>
										<OPTION value="">不限</OPTION>
										<OPTION value=0-500>500元以下</OPTION>
										<OPTION value=500-1000>500-1000元</OPTION>
										<OPTION value=1000-1500>1000-1500元</OPTION>
										<OPTION value=1500-100000>1500元以上</OPTION>
									</select>
								</div>
								<label class="layui-form-label">区域:</label>
								<div class="layui-input-inline">
									<select name="district_id" id="district_id">
										<option value="">请选择区域</option>
										<OPTION value="">不限</OPTION>
										<OPTION value=1>中原区</OPTION>
										<OPTION value=6>惠济区</OPTION>
										<OPTION value=2>高新区</OPTION>
										<OPTION value=5>金水区</OPTION>
										<OPTION value=4>管城区</OPTION>
										<OPTION value=8>郑东新区</OPTION>
										<OPTION value=7>上街区</OPTION>
										<OPTION value=3>二七区</OPTION>
									</select>
								</div>
								<label class="layui-form-label">房型:</label>
								<div class="layui-input-inline">
									<select name="type_id" id="type_id">
										<option value="">请选择房型</option>
										<OPTION value="">不限</OPTION>
										<OPTION value=1>一室一厅</OPTION>
										<OPTION value=2>两室一厅</OPTION>
										<OPTION value=3>三室一厅</OPTION>
										<OPTION value=4>三室两厅</OPTION>
										<OPTION value=7>两室两厅</OPTION>
										<OPTION value=5>四室两厅</OPTION>
										<OPTION value=6>四室三厅</OPTION>
									</select>
								</div>
								<label class="layui-form-label">面积:</label>
								<div class="layui-input-inline">
									<select name="floorage" id="c_floorage">
										<option value="">请选择面积</option>
										<OPTION value="">不限</OPTION>
										<OPTION value=0-50>0-50平</OPTION>
										<OPTION value=50-80>50-80平</OPTION>
										<OPTION value=80-120>80-120平</OPTION>
										<OPTION value=120-160>120-160平</OPTION>
										<OPTION value=160-1000>160-1000平</OPTION>
									</select>
								</div>
							</div>
						</form>
					</div>

					<div class="table-responsive" style="background-color: #F5C9C4">
						<table class="table">
							<thead>
								<tr class="success">
									<td>序号</td>
									<td>图片展示</td>
									<td>标题</td>
									<td>地址</td>
									<td>房型</td>
									<td>面积</td>
									<td>月租金</td>
									<td>发布日期</td>
									<td>操作</td>
								</tr>
							</thead>
							<tbody>
								<tr class="active" v-for="(item,index) in result">
									<td style="vertical-align: middle; text-align: center">{{index+1}}</td>
									<td><img src="/images/thumb_house.gif" width="100"
										height="75" alt=""></td>
									<td style="vertical-align: middle;width:200px">{{item.title}}</td>
									<td style="vertical-align: middle">
										{{item.dname}}{{item.sname}}</td>
									<td style="vertical-align: middle">{{item.tname}}</td>
									<td style="vertical-align: middle">{{item.floorage}}</td>
									<td style="vertical-align: middle">{{item.price}}</td>
									<td style="vertical-align: middle">{{item.pubdate}}</td>
									<td style="vertical-align: middle">
									
									<!-- 管理员操作类型-->
									<#if "${loginuser.isadmin}"=="是">
										<button type="button" class="btn btn-success"
											@click="checkEvent(item.id)">查看详细</button>
										<button type="button" class="btn btn-success"
											@click="editEvent(item.id)">编辑</button>
										<button type="button" class="btn btn-success"
											@click="delEvent(item.id)">删除</button>
									</#if>
									<!-- 普通用户操作类型-->
									<#if "${loginuser.isadmin}"=="不是">
										<button type="button" class="btn btn-success"
											@click="checkEvent(item.id)">查看详细</button>
										
									</#if>
								</tr>
							</tbody>
						</table>
						<div id="pagediv" align="center"></div>
					</div>
				</div>
			</section>
		</div>
		<!-- 用户管理主页面-->
		<div class="content-wrapper" style="background-color: #ACD04A" id="userstab" hidden="true">
			<!-- 内容头部 -->
			<section class="content-header">
				<h1 style="font-style: inherit;font-family: fantasy;font-size: 30px">
					用户基本信息 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="getUsers" class="btn btn-success">查询</button>
				</h1>
			</section>
			<!-- 主要内容-->
			<section class="content">

				<!--放置你的页面-->
				<div id="app1" class="container">
					<div align="center">
						<div class="form-group">
							
							<label class="sr-only" for="name">用户名</label> <input type="text"
								class="form-control" id="name" placeholder="用户名">
						</div>
					</div>
					<div align="center">
						<div class="form-group">
							<label class="sr-only" for="username">真实姓名</label> <input type="text"
								class="form-control" id="username" placeholder="真实姓名">
						</div>
					</div>

					<div class="table-responsive" style="background-color: #F5C9C4">
						<table class="table">
							<thead>
								<tr class="success">
									<td>序号</td>
									<td>用户名</td>
									<td>联系方式</td>
									<td>真实姓名</td>
									<td>是否管理员</td>
									<td>操作</td>
								</tr>
							</thead>
							<tbody>
								<tr class="active" v-for="(item,index) in result">
									<td style="vertical-align: middle; text-align: center">{{index+1}}</td>				
									<td style="vertical-align: middle">{{item.name}}</td>		
									<td style="vertical-align: middle">{{item.telephone}}</td>
									<td style="vertical-align: middle">{{item.username}}</td>
									<td style="vertical-align: middle">{{item.isadmin}}</td>
									<td style="vertical-align: middle">
										<button type="button" class="btn btn-success"
											@click="editEvent1(item.id)">编辑</button>
										<button type="button" class="btn btn-success"
											@click="delEvent1(item.id)">删除</button>
									</td>								
								</tr>
							</tbody>
						</table>
						<div id="pagediv1" align="center"></div>
					</div>
				</div>
			</section>
		</div>
		
		
		
		<!-- 主页底部-->
		<footer class="main-footer" style="background-color: green">
			<div class="pull-right hidden-xs">信息电话:0371-88888888</div>
			<strong>Copyright &copy; 2016 <a href="#">郑州租房网</a>.
			</strong> All rights reserved.
		</footer>


	</div>


	<script src="/AdminLTE-2.3.11/bootstrap/js/bootstrap.min.js"></script>
	<script src="/AdminLTE-2.3.11/dist/js/app.min.js"></script>
	
	<!--房源管理js-->
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});

		//查询租房数据
		var getPageList = function(curr) {
			$.ajax({
				type : "get",
				dataType : "json",
				url : "/house/querylike.do",
				data : {
					pageNum : curr || 1,
					pageSize : 5,
					title : $("#title").val(),
					price : $("#c_price").val(),
					floorage : $("#c_floorage").val(),
					type_id : $("#type_id").val(),
					district_id : $("#district_id").val()
				},
				//显示分页
				success : function(msg) {
					app.result = msg.result;
					laypage({
						cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.totalPage, //总页数
						first : "首页",
						last : "尾页",
						skip : true, //是否开启跳页
						skin : '#AF0000',
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getPageList(obj.curr);
							}
						}
					});
				}
			});
		}
		//获取列表
		getPageList();
		//查询房屋信息事件
		$('#getHouse').on('click', function() {
			getPageList();
		});
		//增加租房信息事件
		$('#addHouse').on('click', function() {
			layer.open({
				type : 2,
				title : '添加租房信息',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/houseadd.ftl',
				end : function() {
					getPageList();
				}
			});
		});

		//编辑事件
		var editEvent = function(id) {
			layer.open({
				type : 2,
				title : '编辑租房信息',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/house/toupdate.do?id=' + id,
				end : function() {
					getPageList();
				}
			});
		}
		
		//查看详细事件
		var checkEvent = function(id) {
			layer.open({
				type : 2,
				title : '租房信息详细情况',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '600px', '700px' ],
				content : '/house/details.do?id=' + id,
				end : function() {
					getPageList();
				}
			});
		}
		
		
		//删除房源事件
		var delEvent = function(id) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
				//是
				$.ajax({
					type : "GET",
					dataType : "json",
					url : "/house/delete.do",
					data : {
						id : id
					},
					success : function(msg) {
						getPageList();
						layer.msg('已经成功删除记录' + id, {
							icon : 5
						});
					}
				});
			}, function() {
				//否
			});
		}
	</script>
	
	<!--用户管理js-->
	<script>
		var app1 = new Vue({
			el : '#app1',
			data : {
				result : []
			}
		});

		//查询用户数据
		var getPageList1 = function(curr) {
			$.ajax({
				type : "get",
				dataType : "json",
				url : "/users/querylike.do",
				data : {
					pageNum : curr || 1,
					pageSize : 5,
					name : $("#name").val(),
					username : $("#username").val()
				},
				//显示分页
				success : function(msg1) {
					app1.result = msg1.result;
					laypage({
						cont : 'pagediv1', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg1.totalPage, //总页数
						first : "首页",
						last : "尾页",
						skip : true, //是否开启跳页
						skin : '#AF0000',
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getPageList1(obj.curr);
							}
						}
					});
				}
			});
		}
		//获取列表
		getPageList1();
		//查询用户信息事件
		$('#getUsers').on('click', function() {
			getPageList1();
		});
		
		//编辑用户事件
		var editEvent1 = function(id) {
			layer.open({
				type : 2,
				title : '编辑用户信息',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/users/toupdate.do?id=' + id,
				end : function() {
					getPageList1();
				}
			});
		}

		//删除用户事件
		var delEvent1 = function(id) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
				//是
				$.ajax({
					type : "GET",
					dataType : "json",
					url : "/users/delete.do",
					data : {
						id : id
					},
					success : function(msg) {
						getPageList1();
						layer.msg('已经成功删除记录' + id, {
							icon : 5
						});
					}
				});
			}, function() {
				//否
			});
		}
	</script>
</body>
</html>
